<script lang="ts" setup>
import { ref, computed, inject, useSlots, VNode } from 'vue';
import { buttonProps } from './button';
import { buttonGroupContextKey } from '@/tokens/button';
import useStore from '@/store';
defineOptions({ name: 'WindowsButton' });
const props = defineProps(buttonProps);
let button = ref(HTMLDivElement);
const buttonGroupContext = inject(buttonGroupContextKey, undefined);
const _size = parseInt(buttonGroupContext ? buttonGroupContext.size : props.size);
const slots = useSlots();
const buttonRef = ref(null);
const pass = computed(() => {
  if (props.license && useStore.setting.licenses.indexOf(props.license) == -1) return false;
  return true;
});
</script>

<template>
  <button ref="buttonRef" :disabled="pass ? false : true" :class="['button', split ? 'split' : '']">
    <el-icon :size="_size" :color="color">
      <component :is="icon" />
    </el-icon>
    <span v-if="slots.default"><slot></slot></span>
  </button>
</template>

<style lang="scss" scoped>
.button {
  border: 0px;
  background: none;
  position: relative;
  user-select: none;
  display: flex;
  align-items: center;
  padding: 0px 10px;
  height: 35px;
  border-radius: 3px;
  cursor: pointer;
  margin-right: 16px;
  span {
    margin-left: 8px;
  }
  &:not(.button[disabled]):hover {
    background: #dcdfe6;
  }
  &.split::after {
    content: '';
    width: 1px;
    height: 80%;
    background: #dedfe0;
    position: absolute;
    right: -8px;
    opacity: 1;
  }
}
.button[disabled] {
  cursor: not-allowed;
  span,
  .el-icon {
    opacity: 0.3;
  }
}
</style>
